<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/ol.css">
    <script type="text/javascript" src="js/ol.js"></script>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=e7aa32db2e826fe71873ce8d58d0d1a2"></script>
    <title>MSAP</title>
    <style>
        head,
        body,
        #map {
            width: 100%;
            height: 600px;
        }
    </style>
</head>

<body>
    <div id="map" class="map"></div>
</body>
<script>
    var tianditu_sateliteLayer = new ol.layer.Tile({
        title: "Tianditu Satelite",
        visible: true,
        source: new ol.source.XYZ({
            url: 'http://t4.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
        })
    });


    var osmMapLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });

    var map = new ol.Map({
        target: 'map',
        layers: [tianditu_sateliteLayer, osmMapLayer],
        overlays: [],
        view: new ol.View({
            center: [114.5, 30.5],
            projection: 'EPSG:4326',
            zoom: 12
        }),
        controls: ol.control.defaults()
    });
</script>

</html>